<template>
    <div class="home">
        <div class="top">
            <div>
                <h6>下单时间</h6>
                <el-date-picker v-model="value1" type="datetimerange" range-separator="至" start-placeholder="开始日期"
                                                end-placeholder="结束日期" format="yyyy-MM-dd HH:mm:ss"
                                value-format="yyyy-MM-dd HH:mm:ss">
                               
                </el-date-picker>
            </div>
            <div>
                <h6>取餐号查询</h6>
                <el-input style="width:150px" v-model="form.meals_no"></el-input>
            </div>
            <el-button style="background: #ff6b00;color: white;margin-left: 20px" @click="queryList">搜索</el-button>

        </div>
        <div class="table">
            <el-table
                    :data="tableList"
                    ref="tableData"
                    highlight-current-row
                    @row-click="changeRow"
            >
                <el-table-column
                        label="订单号"
                        prop="order_no"
                        width="180">

                </el-table-column>
                <el-table-column
                        label="座位号"
                        prop="seat_id"
                        width="180">

                </el-table-column>

                <el-table-column prop="createtime_text" width="160" label="下单时间"></el-table-column>
                <el-table-column prop="meals_no" width="160" label="取餐号"></el-table-column>
                <el-table-column prop="sale_price" width="160" label="订单金额（元）"></el-table-column>

                <el-table-column prop="discount_price" width="130" label="优惠金额（元）"></el-table-column>

                <el-table-column prop="actual_price" width="130" label="实收金额（元）"></el-table-column>

                <el-table-column prop="status_text" width="130" label="状态"></el-table-column>

                <el-table-column prop="user_text" min-width="160" label="操作人"></el-table-column>
            </el-table>
            <!-- 分页器 -->
            <el-pagination
                    style="text-align: right"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="form.page"
                    :page-size="form.limit"
                    layout="total, prev, pager, next, jumper"
                    :total="form.total">
            </el-pagination>

        </div>
        <div class="btnAll">
            <span @click="queryNuber()">叫号</span>
            <span @click="getPick_up_meals()" :class="row.status_text!=='待支付'?'spanUn':''">确定取餐</span>
            <span @click="cancelOrder()" :class="row.status_text!=='待支付'?'spanUn':''">退单</span>
            <span @click="changeDialogShow()" :class="row.status_text!=='待支付'?'spanUn':''">结帐</span>
        </div>

        <!--       结账-->
        <el-dialog title="结账" :visible.sync="isShowDialog1" :close-on-click-modal="false" width="720px">
            <div class="descBox">
                <h3>已选商品：</h3>
                <div>
                    <div v-for="(item,index) in row.detail" :key="item.desc"
                         style="display: flex;justify-content: space-between;align-items: center;height: 40px">
                        <span>

                            <h4>{{item.name}}</h4>
                        <h6>{{item.notes}}</h6>
                        </span>
                        <span style="text-align: center">x{{item.num}}</span>
                        <span style="text-align: right">￥{{item.menu_price}}</span>
                    </div>
                </div>


            </div>
            <div class="descMain">
                <div class="descLift">
                    <p>
                        <span>应收金额</span>
                        <span>|</span>
                        <span>{{row.sale_price}}</span>
                    </p>
                    <div class="youhui">
                        <p>
                            <span>整单优惠</span>
                            <span>{{(row.sale_price-row.sale_price*row.discount).toFixed(2)}}</span>
                        </p>
                        <div class="remarks">
                <span v-for="(item,index) in discountList" @click="row.discount=item"
                      :class="row.discount==item?'spanOn':''">
                    {{index}}
                </span>
                        </div>
                    </div>
                    <el-switch
                            style="display: block;margin-bottom: 10px;text-align: center"
                            v-model="isPacking_fee"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            active-text="打包费"
                            inactive-text="无打包费">
                    </el-switch>
                    <p>
                        <span>抹零金额</span>
                        <span>{{(actual_price_ZL-row.ml_price).toFixed(2)}}</span>
                    </p>


                </div>
                <div class="descRight">
                    <div class="descRightImg">
          <span v-for="item in imgList" :key="item.title" @click="changePayType(item.code)"
                :class="row.pay_type==item.code?'spanON':''">
                <img :src="item.url" style="width: 20px"/>
                <h4>{{item.title}}</h4>
          </span>
                    </div>
                    <el-input v-model="actual_price_Gai" style="margin-bottom: 10px">
                        <span slot="prepend">实收金额</span>
                        <el-button slot="append" @click="molinBtn">抹零</el-button>
                    </el-input>
                    <Keypad @input-clicked="handleInput" @queDing="checkOut()"/>

                </div>
            </div>


        </el-dialog>

    </div>
</template>

<script>
    import {getLodop} from '@/utils/Lodop';
    import Keypad from '@/components/keypad.vue'
    import {
        order_list,
        call_number,
        pick_up_meals,
        order_cancel,
        discount_lists,
        queryCheckout
    } from '@/services/model/orderList'
    import Format from "@/utils/format";
    import constUrl from '@/services/env'
    import {getLocalStorageItem} from '@/utils/storage-helper'
    import wx from '@/views/order/wx.png'
    import xj from '@/views/order/xj.png'
    import zfb from '@/views/order/zfb.png'

    export default {
        components: {Keypad},
        data() {
            return {
                isPacking_fee: false,
                value1: [],
                timerArray11: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
                // timerArray: [new Date()  -(3600 * 1000 * 24 * 1-1),new Date() ], // 初始化为 null 或合适的日期值，
                isShowDialog1: false,
                discountList: [],
                imgList: [{
                    code: 1,
                    url: xj,
                    title: '现金'
                }, {
                    code: 2,
                    url: wx,
                    title: '微信'
                }, {
                    code: 3,
                    url: zfb,
                    title: '支付宝'
                },],
                keys: [
                    {label: '1', value: '1'},
                    {label: '2', value: '2'},
                    {label: '3', value: '3'},
                    {label: '4', value: '4'},
                    {label: '5', value: '5'},
                    {label: '6', value: '6'},
                    {label: '7', value: '7'},
                    {label: '8', value: '8'},
                    {label: '9', value: '9'},
                    {label: '0', value: '0'},
                    {label: '00', value: '00'},
                    {label: '.', value: '.'},
                    {label: '确定', value: 'confirm'},
                    {label: '重输', value: 'reset'},
                    {label: '⌫', value: 'delete'}
                ],
                inputValue: '',
                row: {},
                callNum: '',
                tableData: [],
                remarkList: [],
                seat_id: getLocalStorageItem('seat_id'),
                desc: [],
                order_id: '',
                detailData: {specs_price: ''},
                packing_fee: '',
                notes: [],
                parameter: {sale_price: []},
                shoppingCar: [],
                secondMenuList: [],
                kiosk_menu_list: [],
                pid: "",
                cid: '',
                num: 1,
                menu_cateList: [],
                restaurants: [],
                state: '',
                buyStatusList: [{
                    code: 2,
                    name: '已购买'
                }, {
                    code: 4,
                    name: '待支付'
                }],
                constUrl,
                isUpdateDialog: false,
                updateCurrentRow: {},
                tableList: [],
                currentRow: {},
                form: {
                    page: 1,
                    limit: 10,
                    total: 0,

                },
            }
        },
        computed: {
            total: function () {
                return (this.shoppingCar.reduce((total, item) => total + (item.price * item.num), 0) + 10);
            },
            actual_price_Chu() {

                return (this.row.discount * this.row.sale_price)
            },
            actual_price_ZL() {
                if (this.actual_price_Gai !== 0 && this.actual_price_Gai) {
                    return (this.row.discount * this.row.sale_price) - (this.actual_price_Gai)
                }
            },
            actual_price_Gai: {
                get() {
                    if (this.inputValue) {
                        return this.inputValue;
                    } else if (this.row.discount) {
                        return (this.row.discount * this.row.sale_price);
                    } else {
                        return 0;
                    }
                },
                set(value) {
                    this.inputValue = value;
                }
            }
        },
        methods: {

            molinBtn() {
                this.actual_price_Gai = Math.floor(this.actual_price_Gai);
            },
            formatDate(now) {

                // 获取年、月、日、小时、分钟和秒
                const year = now.getFullYear();
                const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要+1
                const day = String(now.getDate()).padStart(2, '0');

                const hours = String(now.getHours()).padStart(2, '0');
                const minutes = String(now.getMinutes()).padStart(2, '0');
                const seconds = String(now.getSeconds()).padStart(2, '0');

                // 返回格式化后的时间
                return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            },

            changeRow(row, rowIndex) {
                this.row = row
                this.$refs.tableData.setCurrentRow(row);
            },
            //提交订单
            async checkOut() {
                if (this.isPacking_fee) {
                    this.actual_price_Gai = this.actual_price_Gai + Number(this.packing_fee)
                }

                let row = {
                    discount: this.row.discount ? this.row.discount : 1,
                    actual_price: this.actual_price_Gai,
                    pay_type: this.row.pay_type,
                    ml_price: this.row.ml_price,
                    order_id: this.row.id,
                    packing_fee: this.packing_fee
                }
                this.prontDialogContent1(row)
                return
                await queryCheckout(row)
                this.isShowDialog1 = false
                this.queryList()
            },
            //结账打印小票

            prontDialogContent1(row) {
                const LODOP = getLodop();
                if (LODOP) {
                    // 初始化打印任务
                    LODOP.PRINT_INIT("打印任务");

                    // 设置打印的页宽度及动态内容长度
                    LODOP.SET_PRINT_PAGESIZE(3, 880, 0, ""); // 宽度138.5mm, 高度自适应

                    // 打印头部信息
                    LODOP.ADD_PRINT_TEXT(15, 50, 450, 25, "拐角老火锅");
                    LODOP.SET_PRINT_STYLEA(1, "FontName", "汉仪旗黑-简");
                    LODOP.SET_PRINT_STYLEA(1, "FontSize", 22);
                    LODOP.SET_PRINT_STYLEA(1, "FontColor", 0);

                    // 在标题下面添加横线
                    LODOP.ADD_PRINT_LINE(60, 30, 60, 250, 0, 2); // 从 X=30 到 X=25 位置绘制线条，Y 坐标为 60，线宽 2 像素

                    // 表头
                    let startY = 80; // 起始Y坐标
                    LODOP.ADD_PRINT_TEXT(90, 10, 431, 25, "菜品    数量    价格   总价");
                    LODOP.SET_PRINT_STYLEA(3, "FontName", "Courier New");
                    LODOP.SET_PRINT_STYLEA(3, "FontSize", 12);
                    LODOP.SET_PRINT_STYLEA(3, "Bold", 1);

                    // 遍历数据并打印每一行
                    this.row.detail.forEach((item, index) => {
                        startY += 30; // 每项的高度间隔
                        LODOP.ADD_PRINT_TEXT(startY, 10, 431, 25,
                            `${item.name.padEnd(8, ' ')} ${String(item.num).padEnd(8, ' ')} ￥${item.menu_price.padEnd(8, ' ')} ￥${String((item.num * item.menu_price).toFixed(2)).padEnd(4, ' ')}`);
                        LODOP.SET_PRINT_STYLEA(3 + index + 1, "FontName", "Courier New");
                        LODOP.SET_PRINT_STYLEA(3 + index + 1, "FontSize", 8); // 行内容使用稍小的字体
                    });

                    // 在总价前面添加横线
                    startY += 40; // 给横线留点空间
                    LODOP.ADD_PRINT_LINE(startY, 30, startY, 250, 0, 2); // 从 X=30 到 X=25 位置绘制线条，Y 坐标为 60，线宽 2 像素
                    // row = {
                    //     discount: this.row.discount ? this.row.discount : 1,
                    //     actual_price: this.actual_price_Gai,
                    //     pay_type: this.row.pay_type,
                    //     ml_price: this.row.ml_price,
                    //     order_id: this.row.id,
                    //     packing_fee: this.packing_fee
                    // }
                    // 打印尾部总价
                    startY += 30; // 为总价留出位置
                    LODOP.ADD_PRINT_TEXT(startY, 132, 431, 30, `总价:￥${this.row.sale_price}`);
                    LODOP.SET_PRINT_STYLEA(this.row.detail.length + 5, "FontSize", 12);
                    LODOP.SET_PRINT_STYLEA(this.row.detail.length + 5, "Bold", 1); // 加粗显示

                    if (!this.isPacking_fee) {
                        // // 打印抹零金额
                        //
                        // startY += 30; // 为抹零金额留出位置
                        // LODOP.ADD_PRINT_TEXT(startY, 100, 431, 30, `抹零金额:￥${(this.actual_price_ZL-this.row.ml_price).toFixed(2)}`);
                        // LODOP.SET_PRINT_STYLEA(this.row.detail.length + 6, "FontSize", 12);
                        // LODOP.SET_PRINT_STYLEA(this.row.detail.length + 6, "Bold", 1); // 加粗显示
                        // 打印实付金额
                        startY += 30; // 为实付金额留出位置
                        LODOP.ADD_PRINT_TEXT(startY, 100, 431, 30, `实付金额:￥${Number(this.actual_price_Gai).toFixed(2)}`);
                        LODOP.SET_PRINT_STYLEA(this.row.detail.length + 6, "FontSize", 12);
                        LODOP.SET_PRINT_STYLEA(this.row.detail.length + 6, "Bold", 1); // 加粗显示
                    } else {
                        // // 打印抹零金额
                        // startY += 30; // 为抹零金额留出位置
                        // LODOP.ADD_PRINT_TEXT(startY, 100, 431, 30, `抹零金额:￥${(this.actual_price_ZL-this.row.ml_price).toFixed(2)}`);
                        // LODOP.SET_PRINT_STYLEA(this.row.detail.length + 6, "FontSize", 12);
                        // LODOP.SET_PRINT_STYLEA(this.row.detail.length + 6, "Bold", 1); // 加粗显示
                        // 打包费用
                        startY += 30; // 为打包费用留出位置
                        LODOP.ADD_PRINT_TEXT(startY, 100, 431, 30, `打包费用:￥${Number(this.packing_fee).toFixed(2)}`);
                        LODOP.SET_PRINT_STYLEA(this.row.detail.length + 6, "FontSize", 12);
                        LODOP.SET_PRINT_STYLEA(this.row.detail.length + 6, "Bold", 1); // 加粗显示
                        // 打印实付金额
                        startY += 30; // 为实付金额留出位置
                        LODOP.ADD_PRINT_TEXT(startY, 100, 431, 30, `实付金额:￥${(this.actual_price_Gai )}`);
                        LODOP.SET_PRINT_STYLEA(this.row.detail.length + 7, "FontSize", 12);
                        LODOP.SET_PRINT_STYLEA(this.row.detail.length + 7, "Bold", 1); // 加粗显示
                    }

                    // 增加空白区域
                    startY += 50; // 给总价和底部留出额外的50px空间
                    LODOP.ADD_PRINT_TEXT(startY, 50, 431, 25, " "); // 添加空白区域
                    // 打印预览或直接打印
                    // LODOP.PREVIEW(); // 预览
                    LODOP.PRINT(); // 直接打印
                } else {
                    alert("未能获取打印控件");
                }
            }
            ,

            changePayType(code) {
                this.row.pay_type = code;
                this.$forceUpdate()
            },
            handleInput(value) {
                this.inputValue = value;
            },
            changeDialogShow() {
                if (this.row.status_text == '待支付') {
                    if (Object.keys(this.row).length !== 0) {
                        this.row.discount = 1
                        this.row.pay_type = 1;
                        this.discount_lists()
                    } else {
                        this.$message('请先选择订单')
                    }
                } else {
                    return
                }


            },
            //折扣配置接口
            async discount_lists() {
                let {data} = await discount_lists()
                this.discountList = data.discount
                this.packing_fee = data.packing_fee
                this.isShowDialog1 = true

            },

            // 确定取餐
            async getPick_up_meals() {
                if (this.row.status_text !== '待支付') {
                    return
                }
                if (this.row.mobile || this.row.name) {
                    await pick_up_meals({order_id: this.row.id})
                } else {
                    this.$message.warning('缺少手机号或者姓名')
                }
            },
            // 退单
            async cancelOrder() {
                if (this.row.status_text !== '待支付') {
                    return
                }
                await order_cancel({order_id: this.row.id})
                this.queryList()
            },
            AddPrintContent(strCode, strName) {
                LODOP.SET_PRINT_STYLE("FontColor", 16711680);
                LODOP.ADD_PRINT_RECT(62, 16, 459, 217, 0, 1);
                LODOP.ADD_PRINT_TEXT(15, 137, 157, 25, "交通银行（      ）");
                LODOP.SET_PRINT_STYLEA(2, "FontName", "隶书");
                LODOP.SET_PRINT_STYLEA(2, "FontSize", 11);
                LODOP.SET_PRINT_STYLEA(2, "FontColor", 0);
                LODOP.ADD_PRINT_TEXT(41, 213, 100, 20, "2008年11月9日");
                LODOP.ADD_PRINT_TEXT(17, 281, 100, 20, "个人业务受理书");
                LODOP.SET_PRINT_STYLEA(4, "FontColor", 0);
                LODOP.ADD_PRINT_TEXT(75, 37, 431, 20, "机构:109110 交易代码:010110");
                LODOP.ADD_PRINT_TEXT(102, 37, 431, 20, "个人网银用户签约成功！");
                LODOP.ADD_PRINT_TEXT(129, 37, 431, 20, "网点名称：东城分行营业部");
                LODOP.ADD_PRINT_TEXT(156, 37, 431, 20, "主卡卡号：" + strCode);
                LODOP.ADD_PRINT_TEXT(183, 37, 431, 20, "客户姓名：" + strName);
                LODOP.ADD_PRINT_TEXT(212, 37, 431, 20, "登陆方式：用户名登陆");
                LODOP.ADD_PRINT_TEXT(17, 218, 60, 20, "东城分行");
                LODOP.ADD_PRINT_TEXT(249, 169, 221, 20, "以上内容已核实确认无误，客户签名：");
                LODOP.ADD_PRINT_TEXT(106, 484, 23, 127, "第二联客户留联");
                LODOP.SET_PRINT_STYLEA(13, "FontColor", 0);
                LODOP.ADD_PRINT_TEXT(284, 21, 74, 20, "授权员");
                LODOP.SET_PRINT_STYLEA(14, "FontColor", 0);
                LODOP.ADD_PRINT_TEXT(284, 200, 74, 20, "复核员");
                LODOP.SET_PRINT_STYLEA(15, "FontColor", 0);
                LODOP.ADD_PRINT_TEXT(284, 346, 74, 20, "经办员");
                LODOP.SET_PRINT_STYLEA(16, "FontColor", 0);
            },
            // 打印叫号
            printDialogContent() {

                const LODOP = getLodop();
                if (LODOP) {
                    // 初始化打印任务
                    LODOP.PRINT_INIT("打印任务");
                    LODOP.PRINT_INITA(0, 0, 522, 333, "叫号");
                    // LODOP.SET_PRINT_PAGESIZE(0,'88px',"");
                    LODOP.SET_PRINT_PAGESIZE(3, 1385, 100, "");//这里3表示纵向打印且纸高“按内容的高度”；1385表示纸宽138.5mm；45表示页底空白4.5mm
                    // this.AddPrintContent("10101010101010","郭德强");
                    LODOP.ADD_PRINT_RECT(0, 0, 0, 0, 0, 0);
                    LODOP.ADD_PRINT_TEXT(15, 50, 450, 25, "拐角老火锅");
                    LODOP.SET_PRINT_STYLEA(2, "FontName", "隶书");
                    LODOP.SET_PRINT_STYLEA(2, "FontSize", 22);
                    LODOP.SET_PRINT_STYLEA(2, "FontColor", 0);
                    LODOP.ADD_PRINT_TEXT(80, 80, 431, 50, this.callNum);
                    LODOP.SET_PRINT_STYLEA(3, "FontName", "隶书");
                    LODOP.SET_PRINT_STYLEA(3, "FontSize", 40);
                    LODOP.SET_PRINT_STYLEA(3, "FontColor", 0);
                    // LODOP.PREVIEW(); //预览
                    LODOP.PRINT();//直接打印
                    // // 动态设置纸张长度
                    // var contentHeight = 250; // 假设内容需要1500毫米的高度
                    // LODOP.SET_PRINT_PAGESIZE(1, 0, contentHeight + "px", "");
                    //
                    // // 设置页边距
                    // LODOP.SET_PRINT_STYLE("MarginTop", 10);
                    // LODOP.SET_PRINT_STYLE("MarginBottom", 10);
                    // LODOP.SET_PRINT_STYLE("MarginLeft", 10);
                    // LODOP.SET_PRINT_STYLE("MarginRight", 10);
                    //
                    // // 打印内容
                    // LODOP.ADD_PRINT_TEXT(100, 100, 300, 200, this.callNum);

                    // // 打印预览
                    // LODOP.PREVIEW();
                } else {
                    alert("未能获取打印控件");
                }
                return
                const printWindow = window.open('', '', 'width=800,height=600');
                printWindow.document.open();
                printWindow.document.write(`
      <html>
      <head>
        <title>拐角老火锅</title>
        <style>
          /* Optional: Add CSS styles for printing */
        </style>
      </head>
      <body onload="window.print(); window.close();">
      <div style="width: 960px;height: 960px;te;font-size: 50px;font-weight: 600;height: 180px;line-height: 180px;text-align: center;align-items: center;">
            ${this.callNum}
        </div>

      </body>
      </html>
    `);
                printWindow.document.close();
            },
            //获取叫号
            async queryNuber() {
                let {data} = await call_number(this.form)
                this.callNum = data
                this.printDialogContent()
            },
            async queryList() {
                if (this.value1) {
                    this.form.createtime = this.value1[0] + '~' + this.value1[1]
                } else {
                    this.form.createtime = ''
                }
                let {data} = await order_list(this.form)
                if (data.order) {
                    data.order.map(x => {
                        x.discount_price = x.discount_price ? x.discount_price : '-'
                        x.actual_price = x.actual_price ? x.actual_price : '-'
                    })
                }

                this.tableList = data.order
                this.form.total = data.count
            },
            // 分页大小改变
            handleSizeChange(val) {
                this.form.limit = val
                this.queryList()
            },

            // 当前页码改变
            handleCurrentChange(val) {
                this.form.page = val
                this.queryList()
            },
        }
        ,
        mounted() {
            const now = new Date();
            const year = now.getFullYear();
            const month = now.getMonth(); // 月份从0开始
            const day = now.getDate();

            // 设置今天的开始时间和结束时间
            const startTime = new Date(year, month, day, 0, 0, 0); // 今天的开始时间
            const endTime = new Date(year, month, day, 23, 59, 59); // 今天的结束时间

            // 使用 formatDate 方法格式化时间
            this.value1 = [this.formatDate(startTime), this.formatDate(endTime)];
            this.queryList()
        }
    }
</script>

<style lang="less" scoped>
    .home {
        background: white;
        width: calc(100 vw-200px);
        box-sizing: border-box;
        padding: 20px 15px;
        height: 100%;
        padding-top: 0px;
        justify-content: flex-start;

        .top {
            height: 100px;
            line-height: 100px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            width: 100%;
            margin-bottom: 10px;
            border-bottom: 1px solid #d2d2d2;

            span {
                margin: 0 10px;
                color: #959595;
            }

            div {
                display: flex;
                align-items: center;
                justify-content: flex-start;

                h6 {

                    margin-right: 20px;
                }
            }

            div:nth-child(1) {
                width: 550px;
                margin-right: 20px;

            }
        }

        .top /deep/ .el-input__prefix, .el-input__suffix {
            top: -30px;
        }

        .table {
            height: 65vh;
            overflow: auto;
        }

        .btnAll {
            width: 100%;
            height: 10vh;
            line-height: 10vh;
            display: flex;
            align-items: center;
            justify-content: flex-start;

            span {
                height: 50px;
                width: 210px;
                display: block;
                text-align: center;
                line-height: 50px;
                color: white;
                font-size: 16px;
                font-weight: 500;
                background: rgb(255, 95, 35);
                margin-right: 20px;
                cursor: pointer;
            }

            .spanUn {
                background: #969696;
                cursor: not-allowed
            }
        }
    }

    .descBox {
        min-height: 160px;
        max-height: 400px;
        overflow: auto;
        border-bottom: 1px solid #a5a5a5;
        box-sizing: border-box;
        padding-bottom: 10px;

        h3 {
            font-size: 20px;
        }

        h6 {
            font-size: 12px;
            color: #b4b4b4;
            margin-top: 5px;
        }

        span {
            width: 200px;
        }
    }

    .descMain {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-top: 20px;

        .descLift {
            width: 40%;
            box-sizing: border-box;

            p {
                display: flex;
                align-items: center;
                justify-content: space-between;
                border: 1px solid #cbcbcb;
                padding: 20px 30px;

                span:nth-child(3) {
                    color: rgb(242, 131, 24);
                    font-size: 20px;
                    font-weight: 600;
                }
            }

            .youhui {
                border: 1px solid #cbcbcb;
                margin-top: 10px;
                height: 200px;
                margin-bottom: 10px;

                p {


                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    border: 0px solid #cbcbcb;
                    border-bottom: 1px solid #cbcbcb;
                    padding: 10px 30px;

                    span:nth-child(3) {
                        color: rgb(242, 131, 24);
                        font-size: 20px;
                        font-weight: 600;
                    }
                }

                .remarks {
                    width: 100%;
                    box-sizing: border-box;
                    padding: 10px 40px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    span {
                        width: 40px;
                        height: 20px;
                        text-align: center;
                        border-radius: 2px;
                        line-height: 20px;
                        background: #cbcbcb;
                        display: inline-block;
                        color: #7d7d7d;
                        cursor: pointer;

                    }

                    .spanOn {
                        background: rgb(242, 131, 24);
                        color: white;
                    }
                }
            }
        }

        .descRight {
            width: 50%;
            height: 300px;
            box-sizing: border-box;
        }

        .descRightImg {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
            cursor: pointer;

            span {
                padding: 8px 20px;
                border-radius: 4px;
                border: 1px solid #d5d5d5;
                display: flex;
                align-items: center;
                justify-content: space-between;

                img {
                    margin-right: 10px
                }
            }

            .spanON {
                background: rgba(255, 165, 0, 0.2);
                border-color: rgba(255, 165, 0, 1);
            }
        }
    }
</style>
